<script setup lang="ts">
import { ref, watch } from "vue";
import { useUserStore } from "@/store/userStore";
import { useRouter } from "vue-router";
import HeaderComponent from "@/component/HeaderComponent.vue";
import BreadcrumbComponent from "@/component/BreadcrumbComponent.vue";
import SidebarComponent from "@/component/SidebarComponent.vue";

const router = useRouter();
const userStore = useUserStore();
const menus = ref(userStore.menuTree);
const isCollapsed = ref(false);

watch(
  () => userStore.menuTree,
  (newMenuTree) => {
    menus.value = newMenuTree;
  }
);

const handleMenuClick = (path: string) => {
  router.push(path);
};

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

console.log(menus.value);
</script>

<template>
  <el-container style="height: 100vh; flex-direction: column">
    <!-- 头部 -->
    <HeaderComponent />

    <el-container style="flex: 1">
      <!-- 侧边菜单 -->
      <SidebarComponent />

      <!-- 内容区域 -->
      <el-main style="padding: 20px; background-color: #fff">
        <BreadcrumbComponent />
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-container {
  display: flex;
  background-color: #fff;
}
.el-main {
  flex: 1;
  padding: 20px;
  background-color: #f5f5f5;
}
</style>
